<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- .stop阻止冒泡 -->
    <div @click="divClick">
        aaaaa<button @click="btnClick">按钮</button>
    </div>
    <div @click="divClick">
        bbbbb<button @click.stop="btnClick">按钮</button>
    </div>

    <hr>

    <!-- .prevent阻止默认事件 -->
    <form action="baidu">
        <input type="text">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!-- v-on:keyup监听某个键盘的键帽 -->
    <input type="text" @keyup="keyup">
    <!-- 比如监听回车 -->
    <input type="text" @keyup.enter="keyup">

</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！"
        },
        methods: {
            btnClick () {
                console.log("button..")
            },
            divClick () {
                console.log("div...")
            },
            submitClick () {
                //此处自己把数据手动提交到服务器，而不是直接submit按钮提交数据
                console.log("阻止提交")
            },
            keyup () {
                console.log("正在输入中。。。");
            }
        }
    });
</script>

</body>
</html>